<template>
	<!-- 按钮组件 -->
	<div
		:style="{ width }"
		:class="[btnType]"
		class="ly-button px-3 py-1 rounded-sm cursor-pointer text-sm shadow-md dark:shadow-lg">
		{{ text }}
	</div>
</template>

<script lang="ts">
export default defineComponent({
	name: 'LyButton',
	props: {
		text: {
			type: String,
			default: '按钮',
		},
		width: {
			type: String,
			default: 'fit-content',
		},
		type: {
			type: String as () => 'primary' | 'error' | 'warning' | 'info' | 'default',
			default: 'default',
		},
	},
	setup(props) {
		const btnType = computed(() => {
			switch (props.type) {
				case 'primary':
					return 'bg-blue-500 text-white hover:bg-blue-600';
				case 'error':
					return 'bg-red-500 text-white hover:bg-red-600';
				case 'warning':
					return 'bg-orange-500 text-white hover:bg-orange-600';
				case 'info':
					return 'bg-gray-500 text-white hover:bg-gray-600';
				default:
					return 'border border-gray-500 dark:bg-gray-100';
			}
		});

		return {
			btnType,
		};
	},
});
</script>

<style lang="scss" scoped></style>
